<script setup lang="ts">


 // 引入reactive响应式转换函数
 import {onMounted, reactive} from 'vue';
  // 引入useStorage，用来管理登录信息，记录用户名和密码
import { useStorage } from '@vueuse/core';
  // 引入useRouter，用来跳转到根目录下
import { useRouter } from 'vue-router';
  // 引入Message, 用来提示错误信息
import { Message } from '@arco-design/web-vue';
  // 引入编写好的接口请求方法
import { login } from '../apis/user'; 
  //定义路由
const router = useRouter();


  // 通过useStorage创建loginConfig,用来管理登录配置信息，包括是否记住用户名和密码。
const loginConfig = useStorage(
  'loginConfig', {
    remember: false,
    username: '',
    password: '',
    token: ''
  }
);
  // 登录表单数据，使用reactive转换为响应式对象
const loginForm = reactive({
  username: loginConfig.value.username,
  password: loginConfig.value.password
});

  // 用户登录，异步请求
const submitForm = async () => {
  if(!loginForm.username||!loginForm.password){
    Message.error('用户名和密码错误');
    return
  }
  const res = await login(loginForm);
  if(res.data.code == 200){
  Message.success('登录成功');
  loginConfig.value.username = loginForm.username;
  loginConfig.value.password = loginForm.password;
  localStorage.setItem('token',res.data.data.access_token);
  router.push('/mainbox');
  }else if(res.data.code == 500){
    Message.error(res.data.msg);
  }else{
    Message.error('登录失败');
  }
};
</script>

<template>
  <a-row class="login-container">
    <!-- 左侧区域 --->
    <a-col :span="14" class="login-left"> </a-col> 
    <!-- 右侧区域 --->
    <a-col :span="10">
      <div>
        <!-- 顶部欢迎部分 -->
        <slot name="title">
          <div class="login-form-title">光伏能源数字智能管理平台</div>
        </slot>
        <a-form :ref="loginForm" :model="loginForm" class="login-form">
          <a-form-item hide-label>

            <a-input v-model="loginForm.username" placeholder="用户名" allow-clear>
              <!-- 图标 -->
              <template #prefix>
                <icon-user />
              </template>
            </a-input>
          </a-form-item>
          <a-form-item hide-label>
            <a-input-password v-model="loginForm.password" placeholder="密码" allow-clear>
              <!-- 图标 -->
              <template #prefix>
                <icon-lock />
              </template>
            </a-input-password>
          </a-form-item>
          <!-- 登录按钮 -->
          <a-space :size="16" direction="vertical">
            <a-button type="primary" html-type="submit" @click="submitForm" long >登录</a-button>
          </a-space>
        </a-form>
      </div>
      <div class="login-footer"> 
        Copyright © MY 光伏能源数字智能管理平台
      </div>
    </a-col>

  </a-row>
</template>

<style lang="less" scoped>
.login-container {
  height: 100vh;
  .login-left{
    height: 100%;
    background: url('..\assets\pv-login-background.jpeg') no-repeat;
    background-size: 100% 100%;
  }
}
.footer {
  position: absolute;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 60px;
  color: var(--color-text-2);
  text-align: center;
}
.login-footer {
  position: absolute;
  bottom: 0;
  width: 42%;
  text-align: center;
  align-items: center;
  justify-content: center;
  height: 60px;
  color: var(--color-text-2);
}

.login-form-title {
  margin-bottom: 10px;
  margin-top: 40%;
  text-align: center;
}
.login-form {
  width: 50%;
  margin: 0 auto;
    &-wrapper {
      width: 320px;
    }
  
  
    &-title {
      color: var(--color-text-1);
      font-weight: 500;
      font-size: 24px;
      line-height: 32px;
    }
  
  
    &-sub-title {
      color: var(--color-text-3);
      font-size: 16px;
      line-height: 24px;
    }
  
  
    &-error-msg {
      height: 32px;
      color: rgb(var(--red-6));
      line-height: 32px;
    }
  
  
    &-password-actions {
      display: flex;
      justify-content: space-between;
    }
  
  
    &-register-btn {
      color: var(--color-text-3) !important;
    }
  
  
    .login-code {
      width: 100%;
      height: 32px;
  
  
      img {
        width: 100%;
        height: 100%;
      }
    }
  
  
    .login-img-text {
      line-height: 32px;
      cursor: pointer;
      color: var(--color-text-1);
    }
  
  
    .login-img-text:hover {
      text-decoration-line: underline;
    }
  }
</style>